<template>

  <div class="tabbar">

    <Tabbar>
      <TabbarItem v-for="tabbarData in tabbarDatas" :path="tabbarData.path" :activColor="tabbarData.activColor" :key="tabbarData.highImg">
        <img :src="tabbarData.normalImg" alt="" slot="icon">
        <img :src="tabbarData.highImg" alt="" slot="icon-active">
        <span slot="title">{{tabbarData.title}}</span>
      </TabbarItem>
    </Tabbar>
  </div>
</template>

<script>

  import Tabbar from '../common/tabbar/Tabbar'
  import TabbarItem from '../common/tabbar/TabbarItem'

  //导入图片
  import HomeImg from 'assets/img/tabbar/home.svg'
  import HomeActiveImg from 'assets/img/tabbar/home_active.svg'

  import CategoryImg from 'assets/img/tabbar/category.svg'
  import CategoryActiveImg from 'assets/img/tabbar/category_active.svg'

  import ShopcartImg from 'assets/img/tabbar/cart.svg'
  import ShopcartActiveImg from 'assets/img/tabbar/cart_active.svg'

  import ProfileImg from 'assets/img/tabbar/profile.svg'
  import ProfileActiveImg from 'assets/img/tabbar/profile_active.svg'

  export default {
    name: "MainTabbar",
    data:function(){

      return {
          tabbarDatas:[{
            path:'/home',
            activColor: '#ff5679',
            normalImg:HomeImg,
            highImg:HomeActiveImg,
            'title':'首页'
          },
            {
              path:'/category',
              activColor: '#ff5679',
              normalImg:CategoryImg,
              highImg:CategoryActiveImg,
              'title':'分类'
            },
            {
              path:'/shopcart',
              activColor: '#ff5679',
              normalImg:ShopcartImg,
              highImg:ShopcartActiveImg,
              'title':'购物车'
            },
            {
              path:'/profile',
              activColor: '#ff5679',
              normalImg:ProfileImg,
              highImg:ProfileActiveImg,
              'title':'我的'
            }]
      }
    },
    components:{
      Tabbar,
      TabbarItem
    }
  }
</script>

<style scoped>

  .tabbar{

    z-index: 10;
  }
</style>
